<template>
    <div class="tree">
        <div class="tree-exclusive" v-show="currentElementList[0].component === 'Tree'">
            <label class="exclusive-item">
                <input type="checkbox" @change="tree.setTreeMultiple(currentElementList[0], JQuery('#' + tree.getTreeMultipleValueName()).is(':checked'), false); history.addHistory(store.clone(), 127)" :id="tree.getTreeMultipleValueName()" />
                <span>多选框</span>
            </label>
            <label class="exclusive-item">
                <input type="checkbox" @change="tree.setTreeLink(currentElementList[0], JQuery('#' + tree.getTreeLinkValueName()).is(':checked'), false); history.addHistory(store.clone(), 128)" :id="tree.getTreeLinkValueName()" />
                <span>层级联动</span>
            </label>
        </div>
        <div class="menu-row-1" v-if="currentElementList[0].component === 'Menu'">
            <div class="main-text-tran-50">选中颜色</div>
            <div class="main-mas-input-simple main-mas-input-simple-input">
                <div class="mas-basic-layout">
                    <el-color-picker v-model="currentElementList[0].attribute.menuActiveColor" @change="tree.setActiveColor(currentElementList[0], $event); history.addHistory(store.clone(), 125); " class="main-cover-color-picker" size="mini" show-alpha></el-color-picker>
                </div>
            </div>
        </div>
        <div class="tree-add" @click="addRootNode()">
            <i class="el-icon-plus"></i>
        </div>
        <el-tree :data="currentElementList[0].data" ref="tree" draggable node-key="id" default-expand-all :props="treeProps" :expand-on-click-node="false">
            <div class="custom-tree-node" slot-scope="{ node, data }">
                <div class="tree-name">
                    <input class="mas-basis-input node-font" :id="data.id" v-model.trim="data.name" autofocus size="mini" />
                </div>
                <div class="menu-button">
                    <i class="el-icon-plus" @click="addSubNode(node, data)"></i>
                    <i class="el-icon-minus" @click="deleteNode(node, data)"></i>
                </div>
            </div>
        </el-tree>
    </div>
</template>

<script>
import util from '@/js/util/util.js';
import treeAttr from '@/js/main/attribute/tree.js';
import store from '@/js/store/state.js';
import history from '@/js/main/history.js';
import JQuery from 'jquery';

export default {
    name: 'TreeAttr',
    data() {
        return {
            window: window,
            tree: treeAttr,
            store: store,
            JQuery: JQuery,
            currentElementList: store.getCurrentElementList(),
            history: history,
            treeProps: {
                label: 'name',
                id: 'key'
            }
        };
    },
    mounted() {
        treeAttr.setAttribute(this.currentElementList[0]);
    },
    methods: {
        addRootNode() {
            // 添加根节点
            let newChild = {
                id: util.getID(),
                name: '根节点',
                children: []
            };
            this.currentElementList[0].data.splice(this.currentElementList[0].data.length, 0, newChild);
            history.addHistory(store.clone(), 122);
        },
        addSubNode(node, data) {
            // 添加子节点
            let newChild = {
                id: util.getID(),
                name: '子节点',
                children: []
            };
            if (!data.children) {
                this.$set(data, 'children', []);
            }
            data.children.splice(data.children.length, 0, newChild);
            history.addHistory(store.clone(), 123);
        },
        deleteNode(node, data) {
            // 删除某个节点
            let parent = node.parent;
            let children = parent.data.children || parent.data;
            let index = children.findIndex((d) => d.id === data.id);
            children.splice(index, 1);
            history.addHistory(store.clone(), 124);
        }
    }
};
</script>

<style lang="scss">
.el-tree-node:focus > .el-tree-node__content {
    background: #ffffff33 !important;
    align-items: center;
}
.custom-tree-node {
    color: $FontGray !important;
    input {
        color: $FontGray !important;
        background: none !important;
        border: none !important;
    }
}
</style>
<style lang='scss' scoped>
.tree-exclusive {
    display: flex;
    align-content: center;
    margin: 10px 0;
    .exclusive-item {
        width: 50%;
        color: $FontGray;
        span {
            margin: 0 0 0 5px;
        }
    }
}
::v-deep.el-tree {
    background: transparent !important;
    color: #ffffff99 !important;
    font-size: 12px !important;
    // max-height: 300px;
    overflow: auto;
}
.custom-tree-node {
    width: 100%;
    display: flex;
    margin: 3px 0;
    .tree-name {
        flex-grow: 1;
        width: calc(100% - 50px);
    }
    .node-font {
        width: 100% !important;
    }
    .menu-button {
        margin-left: auto;
        width: 42px;
        i {
            margin: 2px 3px;
            font-size: 12px;
            width: 15px;
            height: 15px;
            text-align: center;
            line-height: 15px;
            color: $white;
        }
    }
}
.tree-add {
    width: 100%;
    margin: 5px auto;
    background: #ffffff0f;
    text-align: center;
    cursor: pointer;
    color: $white;
    height: 22px;
    line-height: 22px;
    font-size: 16px;
    border-radius: 2px;
    &:hover {
        background: #ffffff33;
    }
}

.menu-row-1 {
    height: 30px;
    width: 100%;
    display: grid;
    grid-gap: 6px;
    align-items: center;
    font-weight: 600;
    cursor: auto;
    grid-template-columns: 60px 30px 30px;
    margin: 10px 0;
}
</style>